import { AlipayOutlined, LockOutlined, MobileOutlined, TaobaoOutlined, UserOutlined, WeiboOutlined } from '@ant-design/icons';
import { LoginFormPage, ProConfigProvider, ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-components';
import { Button, Divider, Space, Tabs, message, theme } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import useStore from '@/store';

import type { CSSProperties } from 'react';
import type { TabsProps } from 'antd';
import { LoginType, LoginSubmitType } from './types/index.type';

const iconStyles: CSSProperties = {
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '18px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};
const tabItems: TabsProps['items'] = [
  { key: 'account', label: '账号密码登录' },
  { key: 'phone', label: '手机号登录' },
];

const Login = () => {
  const navigate = useNavigate();
  const [loginType, setLoginType] = useState<LoginType>('phone');
  const { token } = theme.useToken();
  const setToken = useStore(state => state.setToken);
  const setUserInfo = useStore(state => state.setUserInfo);
  // * 提交表单且数据验证成功后回调事件
  const onFinish = (value: LoginSubmitType) => {
    console.log('🚀 ~ onFinish ~ value:', value);
    setToken('userToken');
    setUserInfo({ username: '胖虎' });
    navigate('/');
  };

  return (
    <div style={{ backgroundColor: 'white', height: '100vh' }}>
      <LoginFormPage
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        logo="/logo.jpeg"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="登录"
        containerStyle={{ backgroundColor: 'rgba(0, 0, 0,0.65)', backdropFilter: 'blur(4px)' }}
        activityConfig={{
          style: {
            boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
            color: token.colorTextHeading,
            borderRadius: 8,
            backgroundColor: 'rgba(255,255,255,0.25)',
            backdropFilter: 'blur(4px)',
          },
          title: '胖虎yyds',
          subTitle: '本项目由胖虎独家赞助',
          action: (
            <Button
              size="large"
              style={{ borderRadius: 20, background: token.colorBgElevated, color: token.colorPrimary, width: 120 }}
            >
              去看看
            </Button>
          ),
        }}
        actions={
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
            <Divider plain>
              <span style={{ color: token.colorTextPlaceholder, fontWeight: 'normal', fontSize: 14 }}>其他登录方式</span>
            </Divider>
            <Space align="center" size={24}>
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                  height: 40,
                  width: 40,
                  border: '1px solid ' + token.colorPrimaryBorder,
                  borderRadius: '50%',
                }}
              >
                <AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
              </div>
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                  height: 40,
                  width: 40,
                  border: '1px solid ' + token.colorPrimaryBorder,
                  borderRadius: '50%',
                }}
              >
                <TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
              </div>
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                  height: 40,
                  width: 40,
                  border: '1px solid ' + token.colorPrimaryBorder,
                  borderRadius: '50%',
                }}
              >
                <WeiboOutlined style={{ ...iconStyles, color: '#1890ff' }} />
              </div>
            </Space>
          </div>
        }
        onFinish={onFinish}
      >
        <Tabs centered items={tabItems} activeKey={loginType} onChange={activeKey => setLoginType(activeKey as LoginType)} />
        {loginType === 'account' && (
          <>
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined style={{ color: token.colorText }} className={'prefixIcon'} />,
              }}
              placeholder={'请输入账号'}
              rules={[{ required: true, message: '请输入账号!' }]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined style={{ color: token.colorText }} className={'prefixIcon'} />,
              }}
              placeholder={'请输入密码'}
              rules={[{ required: true, message: '请输入密码！' }]}
            />
          </>
        )}
        {loginType === 'phone' && (
          <>
            <ProFormText
              fieldProps={{
                size: 'large',
                prefix: <MobileOutlined style={{ color: token.colorText }} className={'prefixIcon'} />,
              }}
              name="mobile"
              placeholder={'请输入手机号'}
              rules={[
                { required: true, message: '请输入手机号！' },
                { pattern: /^1\d{10}$/, message: '手机号格式错误！' },
              ]}
            />
            <ProFormCaptcha
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined style={{ color: token.colorText }} className={'prefixIcon'} />,
              }}
              captchaProps={{
                size: 'large',
              }}
              placeholder={'请输入验证码'}
              captchaTextRender={(timing, count) => {
                if (timing) return `${count}s ${'获取验证码'}`;
                return '获取验证码';
              }}
              name="captcha"
              rules={[{ required: true, message: '请输入验证码！' }]}
              onGetCaptcha={async () => {
                message.success('获取验证码成功！验证码为：1234');
              }}
            />
          </>
        )}
        <div style={{ marginBlockEnd: 24 }}>
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a href="javascript;" style={{ float: 'right' }}>
            忘记密码
          </a>
        </div>
      </LoginFormPage>
    </div>
  );
};

const Page = () => {
  return (
    <ProConfigProvider dark>
      <Login />
    </ProConfigProvider>
  );
};
export default Page;
